import React, { PureComponent, Fragment } from 'react';
import { exportTable, renderTable } from './util';

const apperance = {
  width: '100px',
  height: '40px',
}

class ExportTableToExcel extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  exportTable() {
    const table = this.myRef.current.innerHTML;
    exportTable(table);
  }

  render() {
    const { children, data, style } = this.props;
    return (
      <Fragment>
        <button style={style?style: apperance}  onClick={this.exportTable.bind(this)}>导出</button>
        <div className="exportTableToExcel" ref={this.myRef}>
          {children && children}
          {data && renderTable(data)}
        </div>
      </Fragment>
    );
  }
}

export default ExportTableToExcel;
